<template>
  <div>
    <h1 class="title">幼教课程管理系统</h1>
    <i-card class="login-form">
      <p slot="title" class="login-title">
        用户登录
      </p>
      <div>
        <i-row>
          <i-col span="24">
            <i-form :model="loginForm" :label-width="40">
              <i-form-item label="账号">
                <i-input v-model="loginForm.account" icon="person" placeholder="请输入账号" @on-enter="doLogin" />
              </i-form-item>
              <i-form-item label="密码">
                <i-input v-model="loginForm.password" type="password" icon="locked" placeholder="请输入密码" @on-enter="doLogin" />
              </i-form-item>
              <i-form-item>
                <i-button type="primary" @click="doLogin" long>登录</i-button>
              </i-form-item>
            </i-form>
          </i-col>
        </i-row>
        <i-row>
          <i-col span="12" class="footer">
            2017-2020 &copy; 王宫制作所
          </i-col>
          <i-col span="12" class="footer" style="text-align: right;">
            版本：v{{version}}
          </i-col>
        </i-row>
      </div>
    </i-card>
  </div>
</template>

<script>
import config from "@/config";

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        account: "",
        password: ""
      },
      version: config.version
    };
  },
  methods: {
    doLogin() {
      const params = {
        account: this.loginForm.account,
        password: this.loginForm.password
      };
      this.axios.post("/users/login", params).then(response => {
        if (response.token) {
          this.axios.defaults.headers = {
            Authorization: response.token
          };
          localStorage.setItem("Authorization", response.token);
          this.$router.push("/home");
        } else {
          this.$Message.error("账号密码不匹配。");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  margin: 50px 0 100px 0;
}

.login-form {
  width: 350px;
  margin: 0 auto;
}

.footer {
  color: #aaa;
}
</style>
